<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
    <meta charset="UTF-8">
    <title>angular-transclude</title>
    <link href="../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<div ng-controller="parentController">
    <button-bar>
        <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
        <button class="primary">Primary2</button>
        <button class="secondary">Secondary1</button>
    </button-bar>
</div>

<script src="../app/bower_components/jquery/dist/jquery.js"></script>
<script src="../app/bower_components/angular/angular.js"></script>

<script>
    var testapp = angular.module('testapp', []);
    testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {
        $scope.primary1Label = 'Prime1';
        $scope.onPrimary1Click = function () {
            $window.alert('Primary 1 clicked');
        }
    }]);
    testapp.directive('primary', function () {
        return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                console.log(1);
                element.addClass('btn btn-primary');
            }
        }
    });
    testapp.directive('secondary', function () {
        return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                element.addClass('btn');
            }
        }
    });
    testapp.directive('buttonBar', function () {
        return {
            restrict: 'EA',
            template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div><div class="transcluded" ng-transclude></div></div>',
            replace: true,
            transclude: true,
            link: function (scope, element, attrs) {
                console.log(2);
                var primaryBlock = element.find('div.primary-block');
                var secondaryBlock = element.find('div.secondary-block');
                var transcludedBlock = element.find('div.transcluded');
                var transcludedButtons = transcludedBlock.children().filter(':button');
                angular.forEach(transcludedButtons, function (elem) {
                    if (angular.element(elem).hasClass('primary')) {
                        console.log(angular.element(elem).text());
                        primaryBlock.append(elem);
                    } else if (angular.element(elem).hasClass('secondary')) {
                        secondaryBlock.append(elem);
                    }
                });
                transcludedBlock.remove();
            }
        };
    });
</script>
</body>
</html>